<template>
  <div>
    <div class="header-img">
      <span class="header-arrow" @click="go">
        <van-icon color="rgba(0,0,0,.2)" name="arrow-left" />
      </span>
      <img :src="detail.handcover" alt="">
    </div>
    <div class="course-detail-m">
      <div class="course-detail">课程名称: {{detail.courseName}}</div>
      <div class="course-detail">所属机构: {{detail.orgName}}</div>
      <div class="course-detail">课程教师: {{detail.teacherName}}</div>
      <div class="course-detail">课程价格: <span style="color: #ff4444">￥{{detail.price}}</span></div>
      <div class="course-detail">课程简介: </div>
      <div style="text-indent: 1em" v-html="detail.introduction"></div>
      <div class="list-title">课程列表</div>
      <div v-if="liveType === '2'" class="list-chapter-title" v-for="(item,index) in detail.chaptersListVOS" :key="index">
        <van-cell :title="index + 1 + '.' + item.chapterName" />
        <van-cell style="text-indent: 1em" v-for="(items,indexs) in item.genseesList" :key="indexs" @click="onClick(items)" :title="(index + 1) + '.' + (indexs + 1) + '.' + items.genseeTitle + '(进入直播)'" />
      </div>
      <div v-if="liveType === '1'" style="text-indent: 1em">
        <p @click="onClick(detail.aliyunLives)">{{aliyunLives.livename}}</p>
      </div>
      <div v-if="liveType === '0'" class="list-chapter-title" v-for="(item,index) in detail.chaptersListVOS" :key="index">
        <van-cell :title="index + 1 + '.' + item.chapterName" />
        <van-cell style="text-indent: 1em" v-for="(items,indexs) in item.videoDemandList" :key="indexs" @click="onClick(items)" :title="(index + 1) + '.' + (indexs + 1) + '.' + items.videoName" />
      </div>
    </div>
    <!--<p class="list-buttom">已经到底了</p>-->
    <van-popup style="width: 100%;height: 100%" v-model="show" position="right">
      <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <!--<div  v-if="liveType === '2'">-->
        <!--<iframe-->
          <!--name="ifm"-->
          <!--id="ifm"-->
          <!--:src="url"-->
          <!--scrolling="yes"-->
          <!--:width="width"-->
          <!--:height="height"-->
          <!--frameborder="0"-->
        <!--&gt;-->
        <!--</iframe>-->
      <!--</div>-->
      <div v-if="liveType === '1'">
        <div class="container">
          <div class="player">
            <video-player  class="video-player vjs-custom-skin"
                           ref="videoPlayer"
                           :playsinline="true"
                           :options="playerOptions"
                           @play="onPlayerPlay($event)"
                           @ended="onPlayerEnded($event)"
            >
            </video-player>
          </div>
        </div>
      </div>
      <div v-if="liveType === '0'">
        <div class="container">
          <div class="player">
            <video-player  class="video-player vjs-custom-skin"
                           ref="videoPlayer"
                           :playsinline="true"
                           :options="playerOptions"
                           x5-video-player-type="h5"
                           @play="onPlayerPlay($event)"
                           @ended="onPlayerEnded($event)"
            >
            </video-player>
            <van-button v-if="next" size="small" @click="NextSection" class="btn" type="danger">下一节</van-button>
          </div>
        </div>
        <div class="list-chapter-title" v-for="(item,index) in detail.chaptersListVOS" :key="index">
          <van-cell :title="index + 1 + '.' + item.chapterName" />
          <van-cell style="text-indent: 1em" v-for="(items,indexs) in item.videoDemandList" :key="indexs" @click="onClick(items)" :title="(index + 1) + '.' + (indexs + 1) + '.' + items.videoName" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import { videoPlayer } from 'vue-video-player'
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'
  export default {
    name: 'learning',
    components: {
      videoPlayer
    },
    data() {
      return {
        detail: {},
        aliyunLives: '',
        pay: '0',
        liveType: '',
        url: '',
        id: '',
        show: false,
        playId: '',
        OnDemand: [],
        next: false,
        playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
          autoplay: false, // 如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: '',
            src: ''// url地址
          }],
          poster: '', // 你的封面地址
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true// 全屏按钮
          },
          gensee: {}
        }
      }
    },
    mounted() {
      this.type()
      this.findCourse()
    },
    methods: {
      type() {
        this.id = this.$route.query.id
        this.liveType = this.$route.query.type.toString()
        if (this.liveType === '0') {
          this.earchDetail('/api/api/student/luCourse/detail', this.id)
        } else if (this.liveType === '1') {
          this.earchDetail('/api/api/student/liveCourse/detail', this.id)
        } else {
          this.earchDetail('/api/api/student/course/detail', this.id)
        }
      },
      earchDetail(url, id) {
        this.detail = {}
        this.$get(url, {courseId: id}).then((res) => {
          if (res.code === 0) {
            this.detail = res.data
            if (this.liveType === '0') {
              this.detail.chaptersListVOS.forEach((e) => {
                e.videoDemandList.forEach((e) => {
                  this.OnDemand.push(e.videoId)
                })
              })
            }
            if (this.liveType === '1') {
              this.aliyunLives = res.data.aliyunLives
            }
          }
        })
      },
      findCourse() {
        this.$get('/api/order/findCourse', {courseId: this.id}).then((res) => {
          if (res.code === 0) {
            if (res.data === '1') {
              this.pay = res.data
            }
          }
        })
      },
      go() {
        this.$router.go(-1)
      },
      onClick(item) {
        this.gensee = item
        if (this.pay === '0') {
          this.$dialog.confirm({
            title: '您尚未购买此课程？',
            confirmButtonText: '去购买'
          }).then(() => {
            this.$post('/api/order/create', {courseId: this.id, orderRemarks: 'h5'}).then((res) => {
              if (res.code === 0) {
                this.$router.push({path: '/index/order-pay', query: {orderId: res.data}})
              }
            })
          })
        } else {
          this.show = true
          if (this.liveType === '0') {
            this.PlayAddress(item.videoId)
          } else if (this.liveType === '1') {
            this.playerOptions.sources[0].src = this.detail.aliyunLives.urlMobile
            this.playerOptions.notSupportedMessage = '直播暂未开始，请稍后再试'
          } else {
            this.show = false
            let name = localStorage.getItem('staffName')
            if (name === 'null') {
              name = localStorage.getItem('mobile')
            }
            window.open(`${item.studentJoinUrl}?nickname=${name}`)
            // this.url = `http://duzhe.gensee.com/sdk/site/test/iframe?testUrl=${item.studentJoinUrl}&ownerid=${item.id}&ctx=Webcast&authcode=${item.studentClientToken}&uname=${localStorage.getItem('nickname')}`
            // this.innerDocument()
          }
        }
      },
      // 获取视频播放链接
      PlayAddress(id) {
        this.playId = id
        this.$get('/api/video/video/address', {requestId: id}).then((res) => {
          this.playerOptions.sources[0].src = res.data[1]
          this.next = false
        })
      },
      // listen event
      onPlayerPlay(player) {
        console.log(player)
        this.next = false
      },
      onPlayerEnded(player) {
        console.log('播放结束!', player)
        this.next = true
      },
      NextSection() {
        let idx = this.OnDemand.indexOf(this.playId)
        let id = this.OnDemand[idx + 1]
        this.PlayAddress(id)
      },
      onClickLeft() {
        this.show = false
      }
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    }
  }
</script>

<style scoped>
  .course-detail-m{
    font-size: 28px;
    margin: 30px;
  }
  .course-detail{
    margin: 5px 0;
  }
  .header-img{
    width: 100%;
    height: 480px;
  }
  .header-img img{
    width: 100%;
    height: 100%;
  }
  .header-arrow{
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 70px;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    background: rgba(255,255,255,.3);
  }
  .list-title{
    padding: 10px;
    text-align: center;
    font-size: 36px;
    font-weight: 600;
  }
  .list-buttom{
    background-color: #fafafa;
    padding: 30px;
    margin: 0;
    color: #d5d5d5;
    text-align: center;
    font-size: 20px;
  }
  .container{
    width: 100%;
    padding: 20px;
    background: #092C20;
  }
  .player{
    width: 80%;
    margin-left: 10%;
    position: relative;
  }
  .btn{
    position: absolute;
    margin-left: -50px;
    left: 48%;
    bottom:36%;
  }
</style>

